<template>
  <!-- 最外层的容器 -->
  <view class="my-settle-container">
    <!-- 全选区域 -->
    <label class="radio">
      <radio @click="changeFlag" color="#C00000" :checked="allCheckFlag" /><text>全选</text>
    </label>

    <!-- 合计区域 -->
    <view class="amount-box">
      合计:<text class="amount">￥{{subTotal}}</text>
    </view>

    <!-- 结算按钮 -->
    <view @click="result" class="btn-settle">结算({{allCheckNum}})==={{num}}</view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        num: 5
      };
    },
    computed: {
      ...mapState('user', ['address', 'token']),
      ...mapGetters('cart', ['allCheckFlag', 'subTotal', 'allCheckNum'])
    },
    methods: {
      ...mapMutations("cart", ['changeState']),
      //  点击实现全选和反选
      changeFlag() {
        //  触发仓库中的函数
        this.changeState(!this.allCheckFlag)

      },
      //  实现支付
      result() {
        //  0- 判断收货地址是否填写 +  商品是否有购买  有就执行以下5步操作，没有就不执行以下操作  reture 
        if (!this.address) {
          return uni.showToast({
            title: "请填写地址"
          })
        }

        if (this.allCheckNum <= 0) {
          return uni.showToast({
            title: "请选择商品"
          })
        }
        //  实现倒计时
        
         if (!this.token) {
          this.setInterFunc()
        }
        
        //  支付
        
        

        

        //  倒计时完成后判断是否微信授权登录  
        //  1-如果登录 就直接跳转到支付页面  或者显示支付二维码
        //  2-如果没有登录  跳转到my页面 可以实现去登录
        //  3-登录完成后  跳转回购物车cart页面   
        //  4-回到cart页面后：调用支付接口实现支付功能
        //  5-支付成功后显示支付成功

      },

      setInterFunc() {
        var timer = setInterval(() => {
          //  显示数字5
          uni.showToast({
            title: this.num + '',
            icon: 'none',
            duration: 1000
          })
          this.num--
          if (this.num < 0) {
            clearInterval(timer)
            uni.showToast({
              title: '1',
              icon: 'none',
              success: () => {
                this.num = 5

               
                  wx.setStorage({
                    key: "shopcar",
                    data: '../../pages/cart/cart'
                  })


                  wx.switchTab({
                    url: '../../pages/my/my'
                  })
                


              }
            })

            return
          }


        }, 1000)



      }
    }
  }
</script>

<style lang="scss">
  .my-settle-container {
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    // 将背景色从 cyan 改为 white
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    font-size: 14px;

    .radio {
      display: flex;
      align-items: center;
    }

    .amount {
      color: #c00000;
    }

    .btn-settle {
      height: 50px;
      min-width: 100px;
      background-color: #c00000;
      color: white;
      line-height: 50px;
      text-align: center;
      padding: 0 10px;
    }
  }
</style>
